<div class="pm_modal {{ctrl.class}}" role="dialog" style="display: block;">
    <form class="modal-dialog" name="customPlanForm" ng-submit="ctrl.submit()" novalidate>
        <button type="button" ng-click="ctrl.close()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" translate-context="Title for the vpn modal" translate>ProtonVPN Plans</h4>
            </div>
            <div class="modal-body customVpnModal-body" ng-class="::ctrl.fromPlan">
                <p class="alert alert-info">
                    <span translate-context="Info for the vpn modal" translate>ProtonVPN encrypts your internet connection, adding a powerful layer of security to your devices and ensuring your online activity stays private.</span> <a href="https://protonvpn.com" target="_blank" translate-context="Link" translate>Learn more</a>
                </p>
                <vpn-columns></vpn-columns>
                <button ng-if="ctrl.hasVpn" type="button" class="customVpnModal-remove" ng-click="ctrl.remove()" translate-context="Remove button for the vpn form" translate>Remove VPN protection</button>
                <vpn-slider></vpn-slider>
                <vpn-total></vpn-total>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="ctrl.close()" class="pm_button modal-footer-button" translate-context="Action" translate>Cancel</button>
            <button tabindex="1" class="pm_button primary modal-footer-button" translate-context="Action" translate>Save</button>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
